<template>
	<view class="root">
		<view class="header">
			<view class="back" @click="uni.navigateBack()">
				<up-icon name="arrow-left" color="#333333" size="38rpx"></up-icon>
			</view>
			<view class="text">
				<text>个人中心</text>
			</view>
		</view>
		<view class="title">
			<text>眼动力训练</text>
		</view>
		<view class="subtitle">
			<text>累计完成</text>
			<text style="font-size: 175rpx;color: #27A25C;word-break: break-all;">99</text>
			<text>分钟</text>
		</view>
		<view class="list">
			<view class="info" v-for="i in 5">
				<view class="left">
					<view class="name">
						<text>完成每日课程锻炼</text>
					</view>
					<view class="time">
						<text>2022-06-12 09:11:22</text>
					</view>
				</view>
				<view class="right">
					<text>+</text>
					<text>10.00</text>
					<text>分钟</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue";
import {getWeeklyAllApi} from '@/api/index.js'
import {onLoad} from '@dcloudio/uni-app'

onLoad((options) => {
	if(options.id) {
		getWeeklyAllApi({fileInfoIds:[options.id]})
	}
})

</script>

<style lang="less" scoped>
.root{
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-top: 93rpx;
	box-sizing: border-box;
	.header{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		column-gap: 21rpx;
		padding: 0 42rpx;
		.back{
			min-width: 123rpx;
			max-width: 123rpx;
			width: 123rpx;
			height: 123rpx;
			border-radius: 50%;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.text{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: rgba(0,0,0,0.54);
			letter-spacing: 2rpx;
		}
	}
	.title{
		padding: 54rpx 72rpx 0 72rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 42rpx;
		color: #00A554;
		letter-spacing: 4rpx;
	}
	.subtitle{
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 42rpx;
		color: #000000;
		letter-spacing: 4rpx;
		text-align: right;
		padding:0 91rpx;
	}
	.list{
		padding: 61rpx 32rpx 38rpx 40rpx;
		width: 624rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 28rpx;
		margin: 0 auto;
		.info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;
			.left{
				.name{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 25rpx;
					color: #000000;
					margin-bottom: 7rpx;
				}
				.time{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 21rpx;
					color: #000000;
				}
			}
			.right{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 25rpx;
				color: #000000;
			}
		}
	}
}
</style>